<template>
    <view class="container" :style="{ background: easyGetColor('red') }">
        <header-bar :config="config"></header-bar>
        <image class="bg" :src="bg" mode="aspectFill"></image>
        <view class="qcode-box">
            <image class="qcode-bg" :src="qcodeBg" mode="aspectFill"></image>
            <text class="qcode-text">请向客户展示该二维码</text>
            <image src="" mode="" class="qcode-img"></image>
        </view>
    </view>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            config: {
                title: "收款二维码",
                color: "#ffffff",
            },
            bg: "/static/qcode/bg.png",
            qcodeBg: "/static/qcode/box.png",
        }
    },
    created() {
        let mainColor = this.easyGetColor("red")
        this.config.backgroundColor = [1, mainColor]
    },
    onLoad(e) {},
    mounted() {},
    methods: {},
}
</script>

<style lang="scss">
.container {
    position: relative;
    height: 100vh;
    .bg {
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .qcode-box {
        position: relative;
        width: calc(100% - 96rpx);
        margin: 200rpx 48rpx;
        height: 0;
        box-sizing: border-box;
        padding: 0 0 0 0;
        padding-top: calc(125% - 120rpx);
        .qcode-bg {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }
        .qcode-text {
            position: absolute;
            width: 100%;
            text-align: center;
            color: $color-white;
            font-size: 30rpx;
            top: 38rpx;
        }
        .qcode-img {
            background: #000;
            height: 400rpx;
            width: 400rpx;
            left: calc(50% - 200rpx);
            position: absolute;
            bottom: 23%;
        }
        // background: url('~@/static/qcode/box.png') 100% 100% no-repeat;;
    }
}
</style>
